<template>
  <div class="video">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
   <div id="video" v-for="video in videos" :key="video.id">
         <van-col span="2">
            <van-image width="100" height="100" :src="video.icon" />
          </van-col>
          <van-col span="19" offset="3">
            <p class="author">{{ video.name }}</p>
          </van-col>
           <p class="title">{{ video.title }}</p>
        <video
          :src="video.video_url"
          controls
          width="50%"
          height="50%"
          :poster="video.cover_url" 
          class="video"
       ></video>
            <!-- 底部 -->
          <foo-ter></foo-ter>
          <!--分割线  -->
          <div class="gap"></div>
        </div>
        </van-pull-refresh>  
  </div>
</template>
<script>
import fooTer from '@/components/fooTer'
import axios from 'axios'
import { Toast } from 'vant';
export default {
components: {
    fooTer,
  },
  data() {
    return {
      isLoading: false,
      videos:[],
    }; 
  },
      created() {
      axios.get('http://localhost:3000/news_video')
        .then(res => {
            this.videos=res.data.data
          // console.log(res);
        })
        .catch(error => {
          console.log(error);
        })
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
         // 使用mock模拟数据
      axios.get('/api/video/index')
        .then(res => {
          this.videos=res.data.data
          console.log(res);
        })
        .catch(error => {
          console.log(error);
        })
      }, 1000);
    },
  },
};
</script>
<style scoped>
.author {
  color: #ff9800;
  padding-top: 10px;
  font-size: 17px;
}
.title {
  line-height: 40px;
}
.picture {
  width: 50%;
  padding-left: 30px;
  margin-top: -15px;
}
.gap {
  margin-top: 1px;
  height: 2px;
  background: lightgray;
}
#video{
    margin-top: -10px;
    margin-bottom: 10px
}
#video video{
    margin-left: 20px;
}
</style>